<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米浮动布局</title>
    <style>
        body {
            margin: 0
        }

        .container {
            width: 1226px;
            margin: 100px auto;
            background-color: rgb(224, 228, 167);
            /* height: 800px; */
        }

        .left {
            width: 234px;
            height: 614px;
            background-color: rgb(233, 180, 180);
            float: left;
        }

        .right {
            width: 978px;
            height: 614px;
            background-color: rgb(218, 97, 97);
            float: right;
        }

        /* 空白宽度 1226-234-978=14 */
        .item {
            width: 234px;
            height: 300px;
            background-color: rgb(158, 245, 147);
            float: left;
            outline: 1px solid red;
            /* border会占据空间 */
            /* border: 1px solid red; */
            margin-right: 14px;
        }

        /* .item:nth-child(4),.item:nth-child(8){
            margin-right: 0;
        } */

        .item:nth-child(4n) {
            margin: 0;
        }

        .item:nth-child(n+5) {
            margin-top: 14px;
        }

        .footer {
            height: 20px;
            background-color: rgb(197, 240, 97);
        }

        .clearfix::after {
            content: '';
            display: block;
            clear: both;
        }
        /* -----inline布局-------- */
        .in{
            font-size: 0;
        }
        .left1 {
            width: 234px;
            height: 614px;
            background-color: rgb(233, 180, 180);
            display:inline-block ;
            vertical-align: top;
            margin-right: 14px;
            font-size: 16px;
        }

        .right1 {
            width: 978px;
            height: 614px;
            background-color: rgb(218, 97, 97);
            display:inline-block ;
            vertical-align: top;
          
        }
        .item1 {
            width: 234px;
            height: 300px;
            background-color: rgb(158, 245, 147);    
            outline: 1px solid red;
            margin-right: 14px;
            display: inline-block;
            font-size: 16px;
            vertical-align: top;
        }
        .item1:nth-child(4n) {
            margin: 0;
        }

        .item1:nth-child(n+5) {
            margin-top: 14px;
        }

    </style>
</head>

<body>
    <h2>浮动布局</h2>
    <div class="container clearfix">
        <div class="left"></div>
        <div class="right">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <h2>inlin-blokc布局</h2>
    <div class="container in">
        <div class="left1"></div>
        <div class="right1">
            <div class="item1">12322213</div>
            <div class="item1">12322213</div>
            <div class="item1">12322213</div>
            <div class="item1">12322213</div>
            <div class="item1">12322213</div>
            <div class="item1">12322213</div>
            <div class="item1">12322213</div>
            <div class="item1">12322213</div>
        </div>
    </div>
    <div class="footer"></div>
</body>

</html>